<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="fragments/innerlayout">
<head>
    <title>商品管理</title>
    <link rel="stylesheet" type="text/css" th:href="@{/H-UI/lib/kindeditor-4.1.10/themes/default/default.css}" />

</head>
<body>
<!--这个模板是继承模板只能替换内容。并且只能在head部分添加自己的js css.
    body中不能写任何的数据，如果body中的模块不是 继承模板中的内容都会被替换掉。
-->

<article class="cl pd-20" layout:fragment="content">
    <form  class="form form-horizontal" id="form-add">
        <div class="row cl">
            <label class="form-label col-xs-3 " style="text-align: center;"><span class="c-red">*</span>名称：</label>
            <div class="formControls col-xs-7 ">
                <input type="text" class="input-text" value="" placeholder="" id="name" name="name" />
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-3 " style="text-align: center;"><span class="c-red">*</span>分类：</label>
            <div class="formControls col-xs-7 ">
                <span class="select-box">
                    <select name="cid" class="select" id="g_category" >
                        <option value="">请选择</option>
                        <option th:each="c: ${categories}" th:value="${c.id}" th:text="${c.name}"></option>
                    </select>
                </span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 " style="text-align: center;"><span class="c-red">*</span>价格：</label>
            <div class="formControls col-xs-7 ">
                <input type="text" class="input-text" value="" placeholder="" id="price" name="price" />
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 " style="text-align: center;"><span class="c-red">*</span>库存：</label>
            <div class="formControls col-xs-7 ">
                <input type="text" class="input-text" value="" placeholder="" id="stock" name="stock" />
                <input type="hidden"  placeholder="" id="picture" name="picture" />
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-3 " style="text-align: center;"><span class="c-red">*</span>图片：</label>
            <div class="formControls col-xs-7 ">
                <div id="imgdiv" style="display: none;">
                    <img width="100" height="100"/>
                </div>
                <div class="upload">
                    <input class="ke-input-text" type="text" name="url" id="url" value="" readonly="readonly" /> <input type="button" id="uploadButton" value="Upload" />
                </div>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-3 " style="text-align: center;">描述：</label>
            <div class="formControls col-xs-7 ">
                <textarea name="description" cols="" rows="" class="textarea" placeholder="说点什么..."></textarea>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-xs-offset-3">
                <input class="btn btn-primary radius" id="submit" type="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;" />
            </div>
        </div>



    </form>
</article>

<div layout:fragment="footerjs">
    <script type="text/javascript" th:src="@{/H-UI/lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
    <script type="text/javascript" th:src="@{/H-UI/lib/jquery.validation/1.14.0/messages_zh.js}"></script>
    <script type="text/javascript" th:src="@{/H-UI/lib/kindeditor-4.1.10/kindeditor-all.js}"></script>
    <script type="text/javascript" th:src="@{/H-UI/lib/kindeditor-4.1.10/lang/zh_CN.js}"></script>
    <script type="text/javascript" th:src="@{/scripts/goods/add.js}"></script>
    <script>
//        此验证和kindeditor 存在冲突。暂时放置。
       /* KindEditor.ready(function(K) {
            var uploadbutton = K.uploadbutton({
                button : K('#uploadButton')[0],
                fieldName : 'imgFile',
                url : basePath+'qiniu/upload/image',
                afterUpload : function(data) {
                    console.info(data);

                    var url =  "http://"+data.data.url ;
                    $('#url').val(url);
                    $("#picture").val(url);

                    $img = $("#imgdiv").find("img");
                    $img.attr("src",url);
                    $("#imgdiv").show();
                },
                afterError : function(str) {
                    alert(str);
                }
            });
            uploadbutton.fileBox.change(function(e) {
                uploadbutton.submit();
            });
        });*/

    </script>


</div>


</body>
</html>